<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header>
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>编辑页面</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318" />

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

    <style>
      .model-form-footer {
        text-align: center;
      }
    </style>
  </head>
</header>
<body>
<div>
  <div class="layui-card" style="min-width: 600px; min-height: 800px;">
    <div class="layui-card-body">
      <form class="layui-form">

        <div class="layui-form-item">
          <label class="layui-form-label">班级名称</label>
          <div class="layui-input-block">
            <input type="text" id="className" name="className" required placeholder="请输入班级名称" autocomplete="off" class="layui-input">
          </div>
        </div>

        <!-- 选择项目 -->
        <div class="layui-inline">
          <label class="layui-form-label">选择项目</label>
          <div class="layui-input-inline">
            <select id="projectSelect" name="projectName" required>
              <option value="">请选择项目</option>
              <option
                      th:each="item : ${projectNameList}"
                      th:text="${item}"
                      th:value="${item}">
              </option>
            </select>
          </div>
        </div>

        <!-- 选择班主任 -->
        <div class="layui-inline">
          <label class="layui-form-label">选择班主任</label>
          <div class="layui-input-inline">
            <select id="chargerSelect" name="chargerName" required>
              <option value="">请选择班主任</option>
              <option
                      th:each="item : ${chargerNameList}"
                      th:text="${item}"
                      th:value="${item}">
              </option>
            </select>
          </div>
        </div>

        <input type="file" id="excelFile" accept=".xlsx, .xls" />


        <div class="layui-form-item" style="margin-top: 30px">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll();">取消</button>
          </div>
        </div>

      </form>



    </div>
  </div>
</div>
<script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script>
  $(function () {

    layui.use(['form', 'layer'], function () {
      var form = layui.form;
      var layer = layui.layer;
      // 访问父窗口的数据
      console.log(parent.chargerNames);

      var chargerNameList = parent.chargerNames;
      var projectNameList = parent.ProjectNames;
      var index = parent.layer.getFrameIndex(window.name);
      var formData = new FormData();
      populateDropdowns();
      function populateDropdowns() {
        // 填充班主任下拉菜单
        var chargerDropdown = $("#chargerSelect");
        chargerNameList.forEach(function (charger) {
            chargerDropdown.append( new Option(charger, charger));
        });

        // 填充项目下拉菜单
        var projectDropdown = $("#projectSelect");
        projectNameList.forEach(function (project) {
          projectDropdown.append( new Option(project, project));
        });

        layui.form.render('select'); // 更新layui表单渲染
      }

      // 文件选择逻辑
      $('#excelFile').change(function (event) {
        var file = this.files[0];
        if (!file) {
          layer.msg('请选择一个文件上传！');
          return;
        }
        formData.append('file', file);
        layer.msg('文件已选择：' + file.name, { icon: 1 });
      });

      // 提交表单逻辑
      form.on('submit(saveForm)', function (data) {
        var className = $('#className').val();
        var chargerName = $('#chargerSelect').val();
        var projectName = $('#projectSelect').val();

        if (!formData.has('file')) {
          layer.msg('请先选择一个文件上传！', { icon: 2 });
          return false; // 阻止表单提交
        }

        if (!className || !chargerName || !projectName) {
          layer.msg('班级名称和班主任必须填写！', { icon: 2 });
          return false; // 阻止表单提交
        }

        formData.set('className', className); // 添加班级名称
        formData.set('chargerName', chargerName); // 添加班主任名称
        formData.set('projectName', projectName); //添加项目名称

        $.ajax({
          url: '/student/batchImport',
          type: 'POST',
          data: formData,
          processData: false, // 不对数据进行处理
          contentType: false, // 不设置内容类型
          success: function (res) {
            if (res.code === 0) {
              parent.layer.close(index);
              parent.layer.msg('导入成功！', { icon: 1, time: 1500 })
              $('#search',parent.document).click();
            } else {
              layer.msg('上传失败：' + res.msg, { icon: 2 });
            }
          },
          error: function () {
            layer.msg('上传失败，请稍后重试！', { icon: 2 });
          },
          complete: function () {
            $('#excelFile').val(''); // 清空文件选择控件
          }
        });

        return false; // 阻止默认表单提交
      });
    });

  });

</script>
</body>
</html>
